<template>
  <div class="bg-container bg-gray-100">
    <div class="bg-img">
      <el-image :src="bgImg[0].picture" fit="cover"> </el-image>
      <!-- <el-carousel indicator-position="inside" height="520px">
        <el-carousel-item v-for="item in bgImg" :key="item.id">
          <a :href="item.redirectUrl ? item.redirectUrl : ''">
            <el-image :src="item.picture" fit="cover"> </el-image>
          </a>
        </el-carousel-item>
      </el-carousel> -->
    </div>

    <div>
      <div class="w-1200-container float-container">
        <div class="left">
          <el-menu @select="menuClick">
            <SideMuneItem
              v-for="item in menuList"
              :key="item.path"
              :basePath="'/user' + '/' + item.path"
              :item="item"
            />
          </el-menu>
        </div>
        <div class="right">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideMuneItem from '@/components/SideMuneItem/index.vue'
import { userRouteList } from '@/router/index.js'
export default {
  components: {
    SideMuneItem,
  },
  data() {
    return {
      bgImg: [
        {
          picture: require('@/assets/page-head/policy.png'),
          address: '南昌市',
        },
      ],
      activeParamName: 'baseInfo',
      menuList: [
        // {
        //   iconName: 'iconName ',
        //   name: '账户信息',
        //   hidden: 0,
        //   child: [
        //     {
        //       iconName: 'el-icon-menu',
        //       name: '基本信息',
        //       paramName: 'baseInfo',
        //       hidden: 0,
        //     },
        //   ],
        // },
      ],
    }
  },

  watch: {
    $route(v) {
      this.initRouteList()
      let paramName = v.params.menu
      this.initRouteName(paramName)
    },
  },
  computed: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.initRouteList()
      let paramName = to.params.menu
      vm.initRouteName(paramName, vm)
    })
  },
  created() {},
  methods: {
    initRouteList() {
      this.menuList = userRouteList.children
    },
    initRouteName(routeName, vm) {
      if (routeName) {
        if (vm) {
          vm.menuClick(routeName)
        } else {
          this.menuClick(routeName)
        }
      }
    },
    menuClick(index) {
      console.log(index)
      // console.log(idnex);
      this.$router.push({ path: index })
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-img {
  width: 100%;
  height: 520px;

  .el-image {
    width: 100%;
    height: 100%;
  }
}
.float-container {
  @apply relative -top-16 left-0 flex min-h-screen;

  .left {
    min-width: 308px;
    width: 308px;

    @apply mr-12 bg-white  shadow-xl border overflow-hidden;

    .left-menu {
      @apply rounded-md;
    }
  }
  .right {
    @apply flex-grow bg-white rounded-sm shadow-xl;
  }
}
</style>
